<template>
  <a-table
    :scroll="{ x: 750 }"
    :pagination="false"
    :columns="columns"
    :data-source="data">
    <template #bodyCell="{ column, text ,record}">
      <template v-if="column.dataIndex === 'title'">
        <a-tooltip placement="top">
          <template #title>
            {{text}}
          </template>
          <span style="color: #2f6ea7;cursor: pointer" href="#" @click="gotoProblem(record)">{{ text }}</span>
        </a-tooltip>
      </template>
      <template v-if="column.dataIndex === 'difficulty'">
        <span :style="{color : text.icon}">{{text.name}}</span>
      </template>
      <template v-if="column.dataIndex === 'tagList'">
        <a-row :span="24" :gutter="5">
          <a-col style="margin-bottom: 5px;cursor: pointer" v-for="item in text" :key="item.id">
            <a-tag :color="item.color">{{item.name}}</a-tag>
          </a-col>
        </a-row>
      </template>
      <template v-if="column.dataIndex === 'passing'">
        <div style="position: relative;top: 10px" >
          <a-progress  :percent="getAcPercent(record.judgeStatusVOS)" size="small"  status="active" />
          <div style="position: absolute;top: -16px;left: 0">
            <span style="font-size: 16px;margin-left: 20px;font-weight: 600">{{getAcNum(record.judgeStatusVOS)}}</span>
            <span style="font-size: 12px;">/{{getSubmitNum(record.judgeStatusVOS)}}</span>
          </div>
        </div>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>

import router from "@/router";
const loading = ref<Boolean>(false)
defineProps(['data'])
onMounted(async () => {
  // loading.value = false
})


//表结构
type ProblemJudgeInfo = {
  status:number,
  count:number,
}
const columns = [
  {
    title: '编号',
    dataIndex: 'problemId',
    key: 'problemId',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    width: 250,
    ellipsis: true
  },
  {
    title: '难度',
    dataIndex: 'difficulty',
    key: 'difficulty',
  },
  {
    title: '标签',
    dataIndex: 'tagList',
    key: 'tagList',
    ellipsis: true,
    width:250
  },
  {
    title: '通过率',
    dataIndex: 'passing',
    width:110,
    key: 'passing',
  }
];
const gotoProblem = (e) =>{
  const { href } = router.resolve({
    path:`/problem/${e.id}`,
  });
  window.open(href, '_blank');
}
const getAcPercent = (judgeInfos : Array<ProblemJudgeInfo>) => {
  return Math.floor((getAcNum(judgeInfos) /  getSubmitNum(judgeInfos)) * 100);
}
const getSubmitNum = (judgeInfos : Array<ProblemJudgeInfo>) : number => {
  return judgeInfos.map(item => item.count).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
}
const getAcNum = (judgeInfos : Array<ProblemJudgeInfo>) : number => {
  let list = judgeInfos.filter(e => e.status == 0)
  if(list.length == 0)
    list = [{status : 0 ,count : 0}]
  return list[0].count
}
//----------------------------------------------------------------//

//----------------------------------------------------------------//

</script>
<style scoped lang="scss">
.judgeInfo{
  .ant-row{
    margin: 15px 0;
  }
}
</style>
